<template>
    <div class="plus-marker">
        <el-image :src="currectPage.pageImg +
            '?x-oss-process=image/crop,x_' +
            Math.round(currectPlusMarker.shape.x) +
            ',y_' +
            Math.round(currectPlusMarker.shape.y) +
            ',w_' +
            Math.round(currectPlusMarker.shape.width) +
            ',h_' +
            Math.round(currectPlusMarker.shape.height) +
            ',x-oss-process=image/resize,w_200,m_mfit'
            " fit="contain" />
        <el-image v-for="(marker, index) in currectPlusMarker.childs" :key="index" :src="getPageImgUrlByMark(marker) +
            '?x-oss-process=image/crop,x_' +
            Math.round(marker.shape.x) +
            ',y_' +
            Math.round(marker.shape.y) +
            ',w_' +
            Math.round(marker.shape.width) +
            ',h_' +
            Math.round(marker.shape.height) +
            ',x-oss-process=image/resize,w_200,m_lfit'
            " fit="contain" />
        <el-button type="primary" @click="plusFinish">追加完毕</el-button>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, defineProps, defineEmits } from "vue";
import { storeToRefs } from "pinia";
import { useBookEditorStore } from "@/stores/modules/wisdbookMarker";
let { pages, currectPage, currectPlusMarker } = storeToRefs(useBookEditorStore());
// const props = defineProps({
// });
const emit = defineEmits(['onClose'])



const plusFinish = (marker: any) => {
    emit('onClose', marker);
}

const getPageImgUrlByMark = (marker: any) => {
    const page = pages.value.find((ele) => ele.id === marker.pageId);
    return page?.pageImg;
};
</script>
<style scoped>
.plus-marker {
    display: flex;
    flex-direction: column;
}

.plus-marker .el-image {
    display: block;
    height: auto;
}
</style>
